{% extends "layout.html" %}

{% block full_width_content %}
<div class="px-8 py-12 max-w-screen-xl mx-auto">
  {% if from_user %}<h2>{{from_user}}'s recent programs</h2>
  {% else %}<h2>{{_('recent')}}</h2>{% endif %}
  <div class="w-full mb-8 flex items-center justify-between" id="program_filter">
        <div id="program_count" class="pt-2 pb-1 px-4 border rounded no-underline bg-blue-700 text-white font-slab leading-6 font-normal tracking-wide"
            data-count="{{user_program_count}}"
        >{{user_program_count}} {{_('programs')|lower}}</div>
    <form>
        <input type="hidden" name="page" value=""> <!-- Submitting the form resets the page -->
        <input type="hidden" name="user" value="{{ from_user }}">
        <div class="flex flex-row px-4 w-full justify-end py-2 rounded-lg gap-4">
            <select id="levels_dropdown" data-cy="levels_dropdown" name="level" class="block appearance-none w-1/8 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
                <option selected value="">&mdash; {{_('level')}} &mdash;</option>
                {% if not request.args.get('adventure') %}
                    {% for i in sorted_level_programs %}
                        <option value="{{ i }}" {% if request.args.get('level') == i|string %}selected{% endif %}>{{ i }}</option>
                    {% endfor %}
                {% else %}
                    {% for i in sorted_adventure_programs[request.args.get('adventure')] %}
                        <option value="{{ i }}" {% if request.args.get('level') == i|string %}selected{% endif %}>{{ i }}</option>
                    {% endfor %}
                {% endif %}
            </select>
            <select id="adventure_select" data-cy="adventure_select" name="adventure" class="block appearance-none w-4/8 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
                <option class="text-center" selected value="">&mdash; {{ _('adventure') }} &mdash;</option>
                {% if request.args.get('level') %}
                    {% for name in sorted_level_programs[request.args.get('level')|int] %}
                        <option value="{{ name }}" {% if request.args.get('adventure') == name %}selected{% endif %}>{{ name }}</option>
                    {% endfor %}
                {% else %}
                    {% for name in sorted_adventure_programs %}
                        <option value="{{ name }}" {% if request.args.get('adventure') == name %}selected{% endif %}>{{ name }}</option>
                    {% endfor %}
                {% endif %}
            </select>
            <div class="flex flex-col mx-2">
                <div class="flex flex-row items-center gap-2">
                    <input type="radio" name="filter" value="all" {% if request.args.get('filter') != "submitted" %}checked{% endif %} data-autosubmit="true">
                    <label for="all">{{_('all')}}</label>
                </div>
                <div class="flex flex-row items-center gap-2">
                    <input type="radio" name="filter" value="submitted" {% if request.args.get('filter') == "submitted" %}checked{% endif %} data-autosubmit="true">
                    <label for="submitted">{{_('submitted')}}</label>
                </div>
            </div>
        </div>
    </form>
  </div>
  <div class="programs w-full" data-cy="programs">
    {% for program in programs %}
        {{ render_partial('htmx-program.html', program=program, adventure_names=adventure_names, public_profile=public_profile, second_teachers_programs=second_teachers_programs) }}
    {% endfor %}

    {% if programs|length == 0 %}
        {% if second_teachers_programs %}
            <p class="text-xl" data-cy="no_programs">{{ from_user }} {{_('no_shared_programs')}}</p>
        {% else %}
            <p class="text-xl" data-cy="no_programs">{{_('no_programs')}}</p>
        {% endif %}
    {% endif %}

  <div class="flex w-1/3 gap-4 align-self-right">
    {% if prev_page_url %}
            <a href="{{prev_page_url}}" class="btn green-btn">{{_('previous_page')}}</a>
    {% endif %}
    {% if next_page_url %}
            <a href="{{next_page_url}}" class="btn green-btn">{{_('next_page')}}</a>
    {% endif %}
  </div>
  </div>
</div>
{% endblock %}
